<template>
  <div>
    <el-dialog
      :title="expertTitle"
      :visible.sync="dialogVisible"
      :before-close="changedialogVisible"
    >
      <el-form
        ref="form"
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        label-width="110px"
        :rules="rules"
      >
        <div class="formtitle">专家基本信息</div>
        <el-form-item label="专家姓名" prop="name" class="onecell">
          <el-input v-model="formInline.name" placeholder="专家姓名" />
        </el-form-item>
        <el-form-item v-if="!isPersonal" label="专家编号" class="onecell">
          <el-input
            v-model="formInline.serialNumber"
            placeholder="H10-五位流水号，自动生成"
            :disabled="true"
          />
        </el-form-item>
        <el-form-item label="目前状态" prop="currentState" class="onecell">
          <el-select v-model="formInline.currentState" placeholder="请选择">
            <el-option label="在用" value="0" />
            <el-option label="停用" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="性别" prop="sex" class="onecell">
          <el-radio-group v-model="formInline.sex">
            <el-radio label="男">男</el-radio>
            <el-radio label="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="出生日期" class="onecell">
          <el-date-picker
            v-model="formInline.birthday"
            type="date"
            placeholder="输入为YYYY-MM-DD"
            style="width: 100%;"
          />
        </el-form-item>
        <el-form-item label="籍贯" class="onecell">
          <el-input v-model="formInline.nativePlace" placeholder="籍贯" />
        </el-form-item>
        <el-form-item label="职务" class="onecell">
          <el-input v-model="formInline.duty" placeholder="职务" />
        </el-form-item>
        <el-form-item label="最高学历" class="onecell">
          <el-select v-model="formInline.education" placeholder="请选择">
            <el-option label="大专" value="0" />
            <el-option label="本科" value="1" />
            <el-option label="硕士" value="2" />
            <el-option label="博士" value="3" />
            <el-option label="其他" value="4" />
          </el-select>
        </el-form-item>
        <el-form-item label="毕业学校" class="onecell">
          <el-input v-model="formInline.school" placeholder="毕业学校" />
        </el-form-item>
        <el-form-item label="专业" class="onecell">
          <el-input v-model="formInline.profession" placeholder="专业" />
        </el-form-item>
        <el-form-item label="最高职称" class="onecell">
          <el-select v-model="formInline.professionalTitle" placeholder="请选择">
            <el-option label="中级" value="0" />
            <el-option label="高级" value="1" />
            <el-option label="正高级" value="2" />
            <el-option label="无" value="3" />
            <el-option label="其他" value="4" />
          </el-select>
        </el-form-item>
        <!--<el-form-item
          v-if="isCompanyExpertAdmin"
          v-show="formInline.source!=='1' || isCompanyExpertAdmin"
          label="身份证号"
          :prop="formInline.source!=='1' || isCompanyExpertAdmin?'identityCard':''"
          class="onecell"
        >
          <el-input v-model="formInline.identityCard" placeholder="身份证号" />
        </el-form-item>-->
        <el-form-item v-show="formInline.source!=='1' || isCompanyExpertAdmin" label="身份证号" class="onecell">
          <el-input @blur="checkIDCard" v-model="formInline.identityCard" placeholder="身份证号" />
        </el-form-item>
        <el-form-item
         v-if="isCompanyExpertAdmin"
          v-show="formInline.source!=='1' || isCompanyExpertAdmin"
          label="手机号码"
          :prop="formInline.source!=='1' || isCompanyExpertAdmin?'phonenumber':''"
          class="onecell"
        >
          <el-input v-model="formInline.phonenumber" placeholder="手机号码" />
        </el-form-item>
        <el-form-item v-else v-show="formInline.source!=='1'" label="手机号码" class="onecell">
          <el-input v-model="formInline.phonenumber" placeholder="手机号码" />
        </el-form-item>
        <el-form-item
          v-show="formInline.source!=='1' || isCompanyExpertAdmin"
          label="电子邮箱"
          class="onecell"
        >
          <el-input v-model="formInline.email" placeholder="电子邮箱" />
        </el-form-item>
        <el-form-item
          v-show="formInline.source!=='1' || isCompanyExpertAdmin"
          label="开户行"
          class="onecell"
        >
          <el-input v-model="formInline.bankName" placeholder="开户行" />
        </el-form-item>
        <el-form-item
          v-show="formInline.source!=='1' || isCompanyExpertAdmin"
          label="银行卡号"
          class="onecell"
          :prop="formInline.source!=='1' || isCompanyExpertAdmin?'bankNo':''"
        >
          <el-input v-model="formInline.bankNo" placeholder="银行卡号" />
        </el-form-item>
        <el-form-item label="其他联系电话" class="onecell" prop="otherContactNumber">
          <el-input v-model="formInline.otherContactNumber" placeholder="其他联系电话" />
        </el-form-item>
        <el-form-item label="是否同济大学在职人员" class="onecell" prop="tjuFlag">
          <el-select v-model="formInline.tjuFlag" placeholder="请选择">
            <el-option label="是" value="1" />
            <el-option label="否" value="0" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="专业类别" prop="professionCategorys" class="twocellSpe">
          <el-cascader
            v-model="formInline.professionCategorys"
            :options="professionOption"
            filterable
            :show-all-levels="false"
            :props="{ multiple: true,value: 'id',emitPath:false,checkStrictly: true }"
            :collapse-tags="false"
            style="width:100%"
            @change="getLastNodes"
          />
          <!--<i class="el-icon-delete"></i>
          <el-select
            v-model="formInline.professionCategorys"
            placeholder="请选择"
            filterable
            multiple
            :multiple-limit="5"
          >
            <el-option
              v-for="item in professionOption"
              :key="item.id"
              :label="item.label"
              :value="item.id"
            />
          </el-select>-->
        </el-form-item>
        <el-form-item>
        <el-button size="mini" icon="el-icon-delete" @click="clearProfessionCategorys">清除</el-button>  
        </el-form-item>
        
        <el-form-item label="现所在单位" class="onecell">
          <el-input v-model="formInline.currentCompany" placeholder="现所在单位" />
        </el-form-item>
        <el-form-item label="常用检索标签" class="onecell">
          <el-input v-model="formInline.commonSearchTags" placeholder="专业类别中无法准确分类时输入，如果多个标签请用，隔开" />
        </el-form-item>
        <el-form-item label="所在部门/院系" class="twocell" prop="tjuFaculty">
          <el-input v-model="formInline.tjuFaculty" placeholder="所在部门/院系" />
        </el-form-item>
        <el-form-item
          v-show="formInline.source!=='1' || isCompanyExpertAdmin"
          label="联系地址"
          class="twocell"
          prop="address"
        >
          <el-input v-model="formInline.address" placeholder="联系地址" />
        </el-form-item>
        <!-- <el-form-item label="沪建设工程评标专家" class="twocell">

          <el-form-item label="资深专家" class="threecell">
            <el-select v-model="formInline.seniorExpertFlag" placeholder="请选择">
              <el-option label="是" value="0"></el-option>
              <el-option label="否" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-form-item>
        <el-form-item label="沪政府采购专家" class="twocell">
          <el-select v-model="formInline.purchaseFlag" placeholder="请选择">
            <el-option label="否" value="0"></el-option>
            <el-option label="是" value="1"></el-option>
            <el-option label="未知" value="2"></el-option>
          </el-select>

        </el-form-item>-->
        <el-form-item class="twocell" style="margin-left:20px">
          <el-button @click="addbmsExpertCertifications">新增</el-button>
        </el-form-item>
        <el-form-item class="twocell">
          <el-table
            :data="formInline.bmsExpertCertifications"
            border
            style="width: 100%;margin-left:20px"
          >
            <el-table-column label="专家持证情况" prop="type">
              <template slot-scope="scope">
                <el-select v-model="scope.row.type" placeholder="请选择">
                  <el-option label="建设工程评标专家" value="0" />
                  <el-option label="政府采购专家" value="1" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="是否持证">
              <template slot-scope="scope">
                <el-select v-model="scope.row.flag" placeholder="请选择">
                  <el-option label="是" value="0" />
                  <el-option label="否" value="1" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="专家证号">
              <template slot-scope="scope">
                <el-form-item
                  :prop="'bmsExpertCertifications.'+scope.$index+'.number'"
                  :rules="scope.row.flag==='0'?{ required: true, message: '请输入专家证号', trigger: 'blur' }:{}"
                >
                  <el-input v-model="scope.row.number" style="width:120px" />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="资深专家" prop="seniorExpertFlag">
              <template slot-scope="scope">
                <el-select v-model="scope.row.seniorExpertFlag" placeholder="请选择">
                  <el-option label="是" value="0" />
                  <el-option label="否" value="1" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column v-if="!isPersonal" label="专业" prop="expertProfession">
              <template slot-scope="scope">
                <el-form-item
                  :prop="'bmsExpertCertifications.'+scope.$index+'.expertProfession'"
                >
                <!--<el-form-item
                  :prop="'bmsExpertCertifications.'+scope.$index+'.expertProfession'"
                  :rules="scope.row.flag==='0'?{ required: true, message: '请输入专业', trigger: 'blur' }:{}"
                >-->
                  <el-input v-model="scope.row.expertProfession" style="width:120px" />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column v-if="isPersonal" label="专业" prop="expertProfession">
              <template slot-scope="scope">
                <el-form-item
                  :prop="'bmsExpertCertifications.'+scope.$index+'.expertProfession'"
                  :rules="scope.row.flag==='0'?{ required: true, message: '请输入专业', trigger: 'blur' }:{}"
                >
                  <el-input v-model="scope.row.expertProfession" style="width:120px" />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column v-if="!isPersonal" label="所属地区" prop="area">
              <template slot-scope="scope">
                 <el-form-item
                  :prop="'bmsExpertCertifications.'+scope.$index+'.area'"
                >
                <!--<el-form-item
                  :prop="'bmsExpertCertifications.'+scope.$index+'.area'"
                  :rules="scope.row.flag==='0'?{ required: true, message: '请选择地区', trigger: 'blur' }:{}"
                >-->
                  <el-select v-model="scope.row.area" placeholder="请选择" style="width:120px;">
                    <el-option
                      v-for="item in areaOptions"
                      :key="item.id"
                      :label="item.label"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column v-if="isPersonal" label="所属地区" prop="area">
              <template slot-scope="scope">
                <el-form-item
                  :prop="'bmsExpertCertifications.'+scope.$index+'.area'"
                  :rules="scope.row.flag==='0'?{ required: true, message: '请选择地区', trigger: 'blur' }:{}"
                >
                  <el-select v-model="scope.row.area" placeholder="请选择" style="width:120px;">
                    <el-option
                      v-for="item in areaOptions"
                      :key="item.id"
                      :label="item.label"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column width="100" label="操作">
              <template slot-scope="scope">
                <a @click="autoDelete(scope.$index, scope.row)">
                  <i class="el-icon-delete aicon" />删除
                </a>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item label="附件上传" class="twocell">
          <vue-uploader
            v-if="dialogVisible"
            :single-type="false"
            :file-list="formInline.bmsAttachments"
            @changeFileData="changeFile"
            @removeFileList="removeFileList"
            :pathName="pathName"
          />
          <!-- <el-input v-model="formInline.file" placeholder="附件上传"></el-input> -->
        </el-form-item>
        <div class="formtitle">专业特长、研究领域、经历与成就</div>
        <!--<el-form-item label="业务类别" class="twocellSpe">
          <el-cascader
            v-model="formInline.businessMerits"
            :options="categoryOptions"
            :show-all-levels="false"
            :props="{multiple:true, value: 'id',emitPath:false }"
            filterable
            style="width:100%"
            @change="businessGetLastNodes"
          />
        </el-form-item>
        <el-form-item>
        <el-button size="mini" icon="el-icon-delete" @click="clearBusinessMerits">清除</el-button>  
        </el-form-item>-->
        <el-form-item label="业务特长" class="twocell">
          <el-input v-model="formInline.businessExpertise" placeholder="业务特长"/>
        </el-form-item>

        <el-form-item label="行业类别" class="twocell">
          <el-select
            v-model="formInline.industryMerits"
            placeholder="请选择"
            clearable
            filterable
            multiple
            :multiple-limit="5"
          >
            <el-option
              v-for="item in industryOptions"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="语言特长" class="twocell">
          <!--<el-select v-model="formInline.languageMerit" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>-->
          <el-input v-model="formInline.languageMerit" placeholder="语言特长" />
        </el-form-item>
        <el-form-item label="经历与成就" class="twocell">
          <el-input
            v-model="formInline.introduction"
            placeholder="经历与成就"
            type="textarea"
            :rows="2"
          />
        </el-form-item>
        <el-form-item label="特长备注" class="twocell">
          <el-input v-model="formInline.meritRemark" placeholder="特长备注" type="textarea" :rows="2" />
        </el-form-item>
        <el-form-item label="专家费用(元)" class="twocell">
          <el-input-number
            v-model="formInline.useAmount"
            placeholder="专家费用"
            controls-position="right"
            :min="0"
            style="width:100%;"
          />
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="changedialogVisible">取 消</el-button>
        <el-button type="primary" @click="sumbitExpert" :disabled="canClick">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  updatePersonalExpert,
  personalExpertInfo,
  addPersonalExpert,
} from "@/api/projectleader/expertGlance";
import {
  updateCompanyExpert,
  companyExpertInfo,
  addCompanyExpert,
} from "@/api/companyLibrary/firmExpert";
import { professionCategory } from "@/api/expert/professionCategory";
import { treeselect } from "@/api/system/business_category";
import { provinceCityTree } from "@/api/provinceCity";
import vueUploader from "@/components/Uploader";
export default {
  name: "ExpertModal",
  components: { vueUploader },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    dialogType: {
      type: Number,
      default: 0,
    },
    expertInfo: {
      type: Object,
      default: () => ({}),
    },
    isPersonal: {
      type: Boolean,
      default: false,
    },
    isCompanyExpertAdmin: {
      type: Boolean,
      default: false,
    },
    pathName: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      categoryOptions: [],
      areaOptions: [],
      industryOptions: [],
      expertTitle: "",
      loading: true,
      expertNanme: "",
      profession: "",
      tableData: [],
      formInline: {
        name: "",
        serialNumber: "",
        // guid: '',
        currentState: "",
        sex: "",
        birthday: "",
        nativePlace: "",
        duty: "",
        education: "",
        school: "",
        profession: "",
        professionalTitle: "",
        identityCard: "",
        phonenumber: "",
        email: "",
        bankName: "",
        bankNo: "",
        professionCategorys: "",
        otherContactNumber: "",
        currentCompany: "",
        commonSearchTags: "",
        tjuFaculty: "",
        file: "",
        businessMerits: [],
        // serviceCategory: [],
        industryMerits: [],
        languageMerit: "",
        introduction: "",
        meritRemark: "",
        useAmount: "",
        bmsExpertCertifications: [],
        bmsAttachments: [],
        attachmentIds: [],
      },
      professionOption: [],
      rules: {
        name: [{ required: true, message: "请输入专家姓名", trigger: "blur" }],
        // guid: [
        //   { required: true, message: '请输入专家编号', trigger: 'blur' },
        // ],
        bankNo: [
          {
            pattern: /^[1-9][0-9]*$/,
            message: "银行卡号请输入数字",
            trigger: "blur",
          },
        ],
        phonenumber: [
          {
            pattern: /^1[34578]\d{9}$/,
            message: "请输入有效手机号码",
            trigger: "blur",
          },
        ],
        currentState: [
          { required: true, message: "请选择目前状态", trigger: "change" },
        ],
        sex: [{ required: true, message: "请选择性别", trigger: "change" }],
        identityCard: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
          {
            pattern: /^[1-9]\d{7}((0[1-9])|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0[1-9])|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/,
            message: "请输入有效身份证号",
            trigger: "blur",
          },
        ],
        phonenumber: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: /^1\d{10}$/,
            message: "请输入有效手机号",
            trigger: "blur",
          },
        ],
        professionCategorys: [
          { required: true, trigger: "blur", message: "请选择专业类别" },
        ],
        purchaseProfession: [],
        purchaseNo: [],
      },
      canClick: false,
    };
  },

  mounted() {
    console.log(this.isCompanyExpertAdmin);
    if (this.dialogType === 1) {
      this.expertTitle = "编辑专家";
    } else {
      this.expertTitle = "添加专家";
    }
    if (this.expertInfo) {
      console.log(this.expertInfo, "expertInfo");
      this.formInline = this.expertInfo;
      this.getInfo();
    }
  },
  created() {
    this.professionList();
    treeselect().then((res) => {
      if (res.code === 200) {
        this.categoryOptions = res.data;
      }
    });
    provinceCityTree({ type: "1" }).then((res) => {
      if (res.code === 200) {
        this.areaOptions = res.data;
      }
    });
    //行业类别
    this.getDicts("sys_industry_type").then((response) => {
      this.industryOptions = response.data;
    });
    this.canClick = false;
  },
  computed:{
    professionOptions(){
      return this.professionOption.map((item)=>{
        if(_.isArray(item)){
            return _.last(item);
        }else{
          return item;
        }
      });
    }
  },
  methods: {
    checkIDCard() {
      console.log(this.formInline.identityCard);
      var identityCard = this.formInline.identityCard;
      if (identityCard) {
        if (identityCard.trim().length != 18) {
          this.msgError("请填写完整的18位身份证号！");
          return false;
        }
      }
    },
    // 专家个人详情
    getInfo() {
      if (this.isPersonal) {
        personalExpertInfo(this.expertInfo.guid).then((res) => {
          if (res.code === 200) {
            res.data.attachmentIds =
              res.data.attachmentIds === null ? [] : res.data.attachmentIds;
            this.formInline = res.data;
          }
        });
      } else {
        companyExpertInfo(this.expertInfo.guid).then((res) => {
          if (res.code === 200) {
            res.data.attachmentIds =
              res.data.attachmentIds === null ? [] : res.data.attachmentIds;
            this.formInline = res.data;
          }
        });
      }
    },
    // 专业类别选择 begin
    professionList() {
      professionCategory().then((res) => {
        if (res.code === 200) {
          this.professionOption = res.data;
        }
      });
    },
    // end
    changedialogVisible() {
      this.$emit("changedialogVisible", false);
    },
    getLastNodes(row) {
        this.formInline.professionCategorys = row;
        //this.professionOption = this.setCanSelect(this.professionOption);
    },
    /*setCanSelect(items){
      items.forEach((item,index) => {
        const disable = this.formInline.professionCategorys.length>1;
        items[index].disabled = this.formInline.professionCategorys.indexOf(item.id)>-1?false:disable;
        if(_.get(item,"children",false)){
          this.setCanSelect(item.children);
        }
      });
      return items;
    },*/
    businessGetLastNodes(row) {
      this.formInline.businessMerits = row;
      // row.map((item, index) => {
      //   this.formInline.businessMerits[index] = item[item.length - 1]
      // })
      console.log(this.formInline.businessMerits, "123");
    },
    sumbitExpert() {
      console.log(this.formInline.identityCard);
      var identityCard = this.formInline.identityCard;
      if (identityCard) {
        if (identityCard.trim().length != 18) {
          this.msgError("请填写完整的18位身份证号！");
          return false;
        }
      }
      this.$refs["form"].validate((valid, model) => {
        if (valid === false) {
          for (const key in model) {
            this.msgError(model[key][0].message);
            break;
          }
        } else {
          if (this.dialogType === 1) {
            if (this.isPersonal) {
              updatePersonalExpert(this.formInline).then((res) => {
                if (res.code === 200) {
                  this.msgSuccess(res.msg);
                  this.$emit("changedialogVisible", false);
                }
              });
            } else {
              updateCompanyExpert(this.formInline).then((res) => {
                if (res.code === 200) {
                  this.msgSuccess(res.msg);
                  this.$emit("changedialogVisible", false);
                }
              });
            }
          } else if (this.dialogType === 0) {
            this.canClick = true;
            if (this.isPersonal) {
              // this.formInline.projectLeader = JSON.parse(sessionStorage.getItem('userinfo') || {}).guid
              this.formInline.projectLeader = this.$route.params.id;
              addPersonalExpert(this.formInline).then((res) => {
                if (res.code === 200) {
                  this.msgSuccess(res.msg);
                  this.$emit("changedialogVisible", false);
                }
                this.canClick = false;
              });
            } else {
              addCompanyExpert(this.formInline).then((res) => {
                if (res.code === 200) {
                  this.msgSuccess(res.msg);
                  this.$emit("changedialogVisible", false);
                }
                this.canClick = false;
              });
            }
          }
        }
      });

      // if (!this.formInline.name) {
      //   this.msgError("专家姓名不能为空")
      //   return false
      // }
      // if (!this.formInline.sex) {
      //   this.msgError("请选择性别")
      //   return false
      // }
      // if (!this.formInline.currentState) {
      //   this.msgError("请选择目前状态")
      //   return false
      // }
      // if (!this.formInline.professionCategorys) {
      //   this.msgError("专业类别不能为空")
      //   return false
      // }
      // if (!this.formInline.identityCard) {
      //   this.msgError("身份证号码不能为空")
      //   return false
      // }
    },
    addbmsExpertCertifications() {
      this.formInline.bmsExpertCertifications.push({
        type: "0",
        flag: "",
        number: "",
        seniorExpertFlag: "",
        expertProfession: "",
        area: "",
        expertId: "",
      });
    },
    autoDelete(index) {
      this.formInline.bmsExpertCertifications.splice(index, 1);
    },
    changeFile(id, name) {
      this.formInline.attachmentIds.push(id);
      // this.$set(this.formInline.bmsAttachments, this.formInline.bmsAttachments.length, { fileName: name, guid: id })
    },
    removeFileList(id) {
      this.formInline.attachmentIds = this.formInline.attachmentIds.filter(
        (item) => item != id
      );
      this.formInline.bmsAttachments = this.formInline.bmsAttachments.filter(
        (item) => item.guid != id
      );
    },clearProfessionCategorys(){
      this.formInline.professionCategorys="";
    },clearBusinessMerits(){
      this.formInline.businessMerits="";
    }
  },
};
</script>
<style lang="scss" scoped>
/deep/.el-dialog {
  width: 1200px;
  .formtitle {
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: #d9e5f1;
    margin-bottom: 10px;
  }
  .onecell {
    width: calc(50% - 20px);
  }
  .twocell {
    width: calc(100% - 20px);
  }
  .twocellSpe {
    width: calc(100% - 110px);
  }
  .threecell {
    width: 100%;
  }
  .el-form-item--medium .el-form-item__content {
    width: calc(100% - 110px);
    .el-select {
      width: 100%;
    }
  }
}
/deep/.el-form--inline .el-form-item {
  text-align: left;
}
.input-wrap {
  padding: 8px;
  display: flex;
  width: 50%;
  .input-label {
    min-width: 1em;
    max-width: 6em;
    color: rgba(0, 0, 0, 0.65);
    margin-right: 8px;
    display: flex;
    align-items: center;
    flex: 0 0 90px;
  }

  .input-content {
    -webkit-box-flex: 1;
    flex-grow: 1;
  }
}

.tablebox {
  margin-top: 20px;
  height: 100%;
}

/deep/.el-dialog__body {
  padding: 0 20px;
}
/deep/.el-input-number.is-controls-right .el-input__inner {
  text-align: left;
}
</style>
